// 高德地图组件
import React, { useEffect } from 'react'
import AMapLoader from '@amap/amap-jsapi-loader'
import { amapKey } from '../utils/tools'

const Amap = (props) => {
  const { width, height, position, setPosition } = props
  let map = null
  useEffect(() => {
    AMapLoader.load({
      key: amapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.Geocoder'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        map = new AMap.Map('container', {
          // 设置地图容器id
          viewMode: '3D', // 是否为3D地图模式
          zoom: 13, // 初始化地图级别
          center: [position.longitude, position.latitude] // 初始化地图中心点位置
        })
        map.on('click', (e) => {
          const { lng, lat } = e.lnglat // 获取点击处的地理坐标
          setPosition({
            longitude: lng,
            latitude: lat
          })
          console.log('点击坐标：', lng, lat)
          // 逆向地理编码
          // const geocoder = new AMap.Geocoder()
          // geocoder.getAddress({ lng, lat }, (status, result) => {
          //   console.log(status, result)
          //   if (status === 'complete' && result.info === 'OK') {
          //     const address = result.regeocode.formattedAddress
          //     console.log('地址：', address)
          //   }
          // })

          // 清除之前标记
          map.clearMap()
          // 点标记
          let marker = new AMap.Marker({
            position: new AMap.LngLat(+lng, +lat)
          })
          // 将创建的点标记添加到已有的地图实例
          map.add(marker)
        })
      })
      .catch((e) => {
        console.log(e)
      })
  }, [])
  return (
    <div id="container" style={{ width: width + 'px', height: height + 'px' }}>
      高德地图组件加载失败
    </div>
  )
}

export default Amap
